{% extends "./inc_base.html" %}
{% block style%}
<!--App自定义的css-->
<style type="text/css">
    .mui-preview-image.mui-fullscreen {
        position: fixed;
        z-index: 20;
        background-color: #000;
    }
    .mui-preview-header,
    .mui-preview-footer {
        position: absolute;
        width: 100%;
        left: 0;
        z-index: 10;
    }
    .mui-preview-header {
        height: 44px;
        top: 0;
    }
    .mui-preview-footer {
        height: 50px;
        bottom: 0px;
    }
    .mui-preview-header .mui-preview-indicator {
        display: block;
        line-height: 25px;
        color: #fff;
        text-align: center;
        margin: 15px auto 4;
        width: 70px;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 12px;
        font-size: 16px;
    }
    .mui-preview-image {
        display: none;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    .mui-preview-image.mui-preview-in {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
    }
    .mui-preview-image.mui-preview-out {
        background: none;
        -webkit-animation-name: fadeOut;
        animation-name: fadeOut;
    }
    .mui-preview-image.mui-preview-out .mui-preview-header,
    .mui-preview-image.mui-preview-out .mui-preview-footer {
        display: none;
    }
    .mui-zoom-scroller {
        position: absolute;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        -webkit-backface-visibility: hidden;
    }
    .mui-zoom {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .mui-slider .mui-slider-group .mui-slider-item img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
    .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
        width: 100%;
    }
    .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
        display: inline-table;
    }
    .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
        display: table-cell;
        vertical-align: middle;
    }
    .mui-preview-loading {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
    }
    .mui-preview-loading.mui-active {
        display: block;
    }
    .mui-preview-loading .mui-spinner-white {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        height: 50px;
        width: 50px;
    }
    .mui-preview-image img.mui-transitioning {
        -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
        transition: transform 0.5s ease, opacity 0.5s ease;
    }
    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @-webkit-keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    p img {
        max-width: 100%;
        height: auto;
    }
</style>
{% endblock%}
{% block content %}

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <!--<span class="mui-icon iconfont icon-cart"><span class="mui-badge">9</span></span>-->
    <h1 class="mui-title">{{info.title}}</h1>
    <span class="mui-icon iconfont icon-search mui-pull-right"></span>
</header>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-action-back" >
        <span class="mui-icon iconfont icon-back"></span>
        <span class="mui-tab-label">返回</span>
    </a>
    <a class="mui-tab-item" href="#SOHUCS">
        <span class="mui-icon iconfont icon-comment"><span class="mui-badge" id="changyan_count_unit">0</span></span>
        <span class="mui-tab-label">评论</span>
    </a>
    <a class="mui-tab-item" href="#shoucang">
        <span class="mui-icon iconfont icon-favor"></span>
        <span class="mui-tab-label">收藏</span>
    </a>
    <a class="mui-tab-item" href="#fenxiang">
        <span class="mui-icon iconfont icon-share"></span>
        <span class="mui-tab-label">分享</span>
    </a>

    {% if controller.is_login %}
    <a class="mui-tab-item" href="/center/index">
        <span class="mui-icon iconfont icon-my"></span>
        <span class="mui-tab-label">我的</span>
    </a>
    {%else%}
    <a class="mui-tab-item" href="/center/public/login">
        <span class="mui-icon iconfont icon-myfill"></span>
        <span class="mui-tab-label">登录</span>
    </a>
    {%endif%}

    <a class="mui-tab-item" href="#top">
        <span class="mui-icon iconfont icon-top"></span>
        <span class="mui-tab-label">顶部</span>
    </a>

</nav>
<div class="mui-content detail" >
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
            <img class="mui-media-object mui-pull-left" src="{{info.cover_id|get_pic('m=0,w=120')}}" style="width: 120px;height:120px;max-width: 120px">
            <div class="mui-media-body">
                {{info.title}}
                <p class="mui-ellipsis-2">{% if info.description !=null %}
                    <!-- short description -->
                    {{info.description}}
                    <!-- /short description -->
                    {% endif %}</p>
                <a href="#dlist" type="button" class="mui-btn mui-btn-primary" style="position:absolute;bottom: 10px;"><span class="mui-icon mui-icon-download"></span>下载 <span class="mui-badge mui-badge-primary">{{info.download}}</span></a>
            </div>
        </li>

    </ul>
    <div class="mui-content-padded">
        <div class="article-header">
            <div class="pgc-bar-top mui-clearfix" >
                <a href="#" ga_category="toutiaohao" ga_label="" ga_event="click" class="avatar-link vwo-media-profile">
                    <div class="avatar">
                        <img src="/u/avatar/{{info.uid}}" class="avatar">
                    </div>
                </a>
                <div class="subtitle">
                    <p class="name"><a href="#" class="screen-name vwo-media-profile">
                        <span id="mediaName" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">{{info.uid|get_nickname}}</span>
                        <img src="/static/mobile/img/logo.png">
                    </a></p>
                    <a href="#" class="time vwo-media-profile" >

                        <span class="original original-fix">原创</span>

                        <span>{{ info.update_time|moment('YYYY-MM-DD hh:mm') }}</span>
                    </a>
                </div>

            </div>
{#
            <div class="favor-wrapper">
                <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">关注</button>
            </div>
            #}
        </div>
    </div>
    <div style="padding: 10px 10px;">
        <div id="segmentedControl" class="mui-segmented-control">
            <a class="mui-control-item mui-active" href="#item1">
                详情
            </a>
            <a class="mui-control-item" href="#item2">
                评论
            </a>
            <a class="mui-control-item" href="#item3">
                相关
            </a>
        </div>
    </div>
    <div id="item1" class="mui-control-content mui-active">
        <div class="mui-content">

            {% if info.fileimgs %}
            <div class="mui-slider">
                {%set pics = info.fileimgs|strToArray%}
                {%set pn = pics|length%}
                <div class="mui-slider-group mui-slider-loop">
                    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一个图文表格) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <ul class="mui-table-view mui-grid-view">
                            <li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="{{pics[0]|get_pic('m=1,w=336,h=336')}}">
                            </a></li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="{{pics[1]|get_pic('m=1,w=336,h=336')}}">
                            </a></li>
                        </ul>
                    </div>
                    {% for item in pics | batch(2) %}
                    <div class="mui-slider-item">
                        <ul class="mui-table-view mui-grid-view">
                            {%for v in item%}
                            <li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="{{v|get_pic('m=1,w=336,h=336')}}" data-preview-src="" data-preview-group="1"></a></li>
                            {%endfor%}
                        </ul>
                    </div>
                    {% endfor %}

                    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一个图文表格) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <ul class="mui-table-view mui-grid-view">
                            <li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="{{pics[pn-2]|get_pic('m=1,w=336,h=336')}}">
                            </a></li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="{{pics[pn-1]|get_pic('m=1,w=336,h=336')}}">
                            </a></li>
                        </ul>
                    </div>
                </div>


            </div>
            {%endif%}
            <div class="mui-table-view-divider">详情</div>

            <article class="article-content" style="background-color: #fff;padding: 10px">
                <!--内容钩子加载-->
                {{content(pagehook)}}
                <!--/内容钩子加载结束-->
            </article>
        </div>

    </div>
    <div id="item2" class="mui-control-content">
        {{HOOK@documentDetailAfter|safe}}
    </div>
    <div id="item3" class="mui-control-content">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                第三个选项卡子项-1
            </li>
            <li class="mui-table-view-cell">
                第三个选项卡子项-2
            </li>
            <li class="mui-table-view-cell">
                第三个选项卡子项-3
            </li>
        </ul>
    </div>
</div>
<div id="dlist" class="mui-popover mui-popover-action mui-popover-bottom">
    <ul class="mui-table-view">
        {%if info.file_id >0%}
        <li class="mui-table-view-cell">
            <a href="#" data-dlink="/dlink/{{info.id}}||1">极速下载</a>
        </li>
        {%endif%}
        {%if info.panurl%}
        {%set panurl = info.panurl|strToArray("\r\n")%}
        {%for url in panurl%}
        {%set pu = url|strToArray("|")%}
        <li class="mui-table-view-cell">

            {%if pu[2]%}
            <a href="#" data-dlink="/dlink/{{info.id}}||3||{{pu[1]|trim|urlencode}}">{{pu[0]}}</a>
            {%else%}
            <a href="#" data-dlink="/dlink/{{info.id}}||2||{{pu[1]|trim|urlencode}}">{{pu[0]}}</a>
            {%endif%}
        </li>
        {%endfor%}
        {%endif%}

    </ul>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#dlist"><b>取消</b></a>
        </li>
    </ul>
</div>
{% endblock%}

{% block script %}
<script src="/static/mobile/js/mui.zoom.js"></script>
<script src="/static/mobile/js/mui.previewimage.js"></script>
<script type="text/javascript">
    mui.previewImage();
    mui('body').on('tap', '.mui-popover-action li>a', function() {
        var a = this,
            parent;
        //根据点击按钮，反推当前是哪个actionsheet
        for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
            if (parent.classList.contains('mui-popover-action')) {
                break;
            }
        }
        //关闭actionsheet
        var link = $(a).attr("data-dlink");
        mui('#' + parent.id).popover('toggle');
        //mui.alert("你刚点击了\"" + link + "\"按钮");
        //打开关于页面
        mui.openWindow({
            url: link,
            id:'dlink'
        });
    })
    var btn = document.querySelectorAll(".mui-bar-tab a.mui-tab-item");
    for(var i = 0;i<btn.length;i++){
        btn[i].addEventListener("tap",function () {
            var href = this.getAttribute("href");
            if(href=="#top"){
                mui.scrollTo(0,500);
            }else if(href=="#shoucang"){
                //todo
                mui.toast("功能开发中。。。")
                return
            }else if(href=="#fenxiang"){
                //todo
                mui.toast("功能开发中。。。")
                return
            }else {
                mui.openWindow({url: href})
            }

        })
    }

</script>
{% endblock %}